<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试 - 转换工具</title>
    <link rel="icon" type="image/x-icon" href="img/ik.ico">
    
    <!-- Bootstrap 5 CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/custom.css" rel="stylesheet">
    <!-- 小米风格样式 -->
    <link href="css/xiaomi-style.css" rel="stylesheet">
</head>
<body class="xiaomi-theme">
    <div id="header"></div>
    
    <!-- 主容器 -->
    <div class="xiaomi-admin-container">
        <div id="sidebar"></div>

        <!-- 主内容区域 -->
        <main class="xiaomi-main-content">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-page-header">
                        <h2 class="page-title">
                            <i class="fas fa-code me-2"></i>
                            API 测试
                        </h2>
                        <p class="page-subtitle">系统中所有可用的API端点测试工具</p>
                    </div>
                </div>
            </div>

            <!-- 配置管理API -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-cogs me-2"></i>
                                配置管理 API
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method get">GET</div>
                                        <div class="api-info">
                                            <h6 class="api-title">获取全局配置</h6>
                                            <p class="api-url">/api/config</p>
                                            <p class="api-desc">获取系统所有配置信息</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="testApi('GET', '/api/config')">测试</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method get">GET</div>
                                        <div class="api-info">
                                            <h6 class="api-title">获取转换类型</h6>
                                            <p class="api-url">/api/config/conversion-types</p>
                                            <p class="api-desc">获取所有支持的数据转换类型</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="testApi('GET', '/api/config/conversion-types')">测试</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文件上传API -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-upload me-2"></i>
                                文件上传 API
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method post">POST</div>
                                        <div class="api-info">
                                            <h6 class="api-title">单文件上传</h6>
                                            <p class="api-url">/api/fileupload/single</p>
                                            <p class="api-desc">上传单个文件（最大100MB）</p>
                                            <input type="file" id="uploadFile" class="form-control form-control-sm mb-2" accept=".xlsx">
                                            <button class="btn btn-outline-primary btn-sm" onclick="testFileUpload()">测试上传</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method post">POST</div>
                                        <div class="api-info">
                                            <h6 class="api-title">分片上传初始化</h6>
                                            <p class="api-url">/api/fileupload/chunk/init</p>
                                            <p class="api-desc">初始化大文件分片上传</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="testChunkInit()">测试</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method get">GET</div>
                                        <div class="api-info">
                                            <h6 class="api-title">文件预览</h6>
                                            <p class="api-url">/api/fileupload/preview/{fileId}</p>
                                            <p class="api-desc">获取上传文件的预览数据</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="testApi('GET', '/api/fileupload/preview/sample')">测试</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据转换API -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-exchange-alt me-2"></i>
                                数据转换 API
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method post">POST</div>
                                        <div class="api-info">
                                            <h6 class="api-title">开始数据转换</h6>
                                            <p class="api-url">/api/dataconversion/start</p>
                                            <p class="api-desc">启动数据转换任务</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="testConversionStart()">测试</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method get">GET</div>
                                        <div class="api-info">
                                            <h6 class="api-title">获取转换进度</h6>
                                            <p class="api-url">/api/dataconversion/progress/{taskId}</p>
                                            <p class="api-desc">查询转换任务进度</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="testApi('GET', '/api/dataconversion/progress/sample-task-id')">测试</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文件下载API -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-download me-2"></i>
                                文件下载 API
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method get">GET</div>
                                        <div class="api-info">
                                            <h6 class="api-title">获取模板列表</h6>
                                            <p class="api-url">/api/download/templates</p>
                                            <p class="api-desc">获取所有可用的模板文件</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="testApi('GET', '/api/download/templates')">测试</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method file">FILE</div>
                                        <div class="api-info">
                                            <h6 class="api-title">下载模板文件</h6>
                                            <p class="api-url">/api/download/template/{type}</p>
                                            <p class="api-desc">下载指定类型的模板文件</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="downloadTemplate('ph1-template')">下载PH1模板</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="api-endpoint-card">
                                        <div class="api-method file">FILE</div>
                                        <div class="api-info">
                                            <h6 class="api-title">下载转换结果</h6>
                                            <p class="api-url">/api/download/result/{taskId}/{type}</p>
                                            <p class="api-desc">下载转换任务的结果文件</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="downloadResult('sample-task', 'converted')">下载结果</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 响应结果显示区域 -->
            <div class="row">
                <div class="col-12">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-terminal me-2"></i>
                                API 响应结果
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="response-display" id="responseArea">
                                <div class="text-center text-muted py-4">
                                    <i class="fas fa-code fa-3x mb-3"></i>
                                    <h5>点击上方的测试按钮查看API响应结果</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Scripts -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>
    <script src="js/layout-loader.js"></script>
    <script>
        // 测试API的通用函数
        async function testApi(method, endpoint, data = null) {
            const responseArea = document.getElementById('responseArea');
            
            try {
                responseArea.innerHTML = `
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2 text-muted">正在请求 ${method} ${endpoint}</p>
                    </div>
                `;

                const config = {
                    method: method.toLowerCase(),
                    url: endpoint,
                    timeout: 10000
                };

                if (data) {
                    config.data = data;
                }

                const response = await axios(config);
                
                displayResponse('成功', response.status, response.data, endpoint);
            } catch (error) {
                displayError(error, endpoint);
            }
        }

        // 测试文件上传
        async function testFileUpload() {
            const fileInput = document.getElementById('uploadFile');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请先选择文件');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);
            formData.append('conversionType', 'ph1-to-yinhai');

            try {
                const responseArea = document.getElementById('responseArea');
                responseArea.innerHTML = `
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2 text-muted">正在上传文件...</p>
                    </div>
                `;

                const response = await axios.post('/api/fileupload/single', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });

                displayResponse('成功', response.status, response.data, '/api/fileupload/single');
            } catch (error) {
                displayError(error, '/api/fileupload/single');
            }
        }

        // 测试分片上传初始化
        async function testChunkInit() {
            const data = {
                fileName: 'test-file.xlsx',
                fileSize: 1024000,
                conversionType: 'ph1-to-yinhai'
            };

            await testApi('POST', '/api/fileupload/chunk/init', data);
        }

        // 测试转换开始
        async function testConversionStart() {
            const data = {
                fileId: 'sample-file-id',
                conversionType: 'ph1-to-yinhai',
                businessRules: {
                    '厂家为空填无': { enabled: true }
                }
            };

            await testApi('POST', '/api/dataconversion/start', data);
        }



        // 下载模板文件
        function downloadTemplate(templateType) {
            const url = `/api/download/template/${templateType}`;
            window.open(url, '_blank');
            
            const responseArea = document.getElementById('responseArea');
            responseArea.innerHTML = `
                <div class="alert alert-info">
                    <i class="fas fa-download me-2"></i>
                    正在下载模板文件: ${templateType}
                    <br><small class="text-muted">URL: ${url}</small>
                </div>
            `;
        }

        // 下载转换结果
        function downloadResult(taskId, fileType) {
            const url = `/api/download/result/${taskId}/${fileType}`;
            window.open(url, '_blank');
            
            const responseArea = document.getElementById('responseArea');
            responseArea.innerHTML = `
                <div class="alert alert-info">
                    <i class="fas fa-download me-2"></i>
                    正在下载结果文件: ${taskId}/${fileType}
                    <br><small class="text-muted">URL: ${url}</small>
                </div>
            `;
        }

        // 显示响应结果
        function displayResponse(status, statusCode, data, endpoint) {
            const responseArea = document.getElementById('responseArea');
            const timestamp = new Date().toLocaleTimeString();
            
            responseArea.innerHTML = `
                <div class="alert alert-success">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong><i class="fas fa-check-circle me-2"></i>${status} (${statusCode})</strong>
                        <small class="text-muted">${timestamp}</small>
                    </div>
                    <div class="small text-muted mb-2">端点: ${endpoint}</div>
                </div>
                <pre class="bg-light p-3 rounded"><code>${JSON.stringify(data, null, 2)}</code></pre>
            `;
        }

        // 显示错误信息
        function displayError(error, endpoint) {
            const responseArea = document.getElementById('responseArea');
            const timestamp = new Date().toLocaleTimeString();
            
            let errorMessage = error.message;
            let statusCode = error.response?.status || 'N/A';
            let errorData = error.response?.data || null;

            responseArea.innerHTML = `
                <div class="alert alert-danger">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong><i class="fas fa-exclamation-triangle me-2"></i>错误 (${statusCode})</strong>
                        <small class="text-muted">${timestamp}</small>
                    </div>
                    <div class="small text-muted mb-2">端点: ${endpoint}</div>
                    <div class="small">错误信息: ${errorMessage}</div>
                </div>
                ${errorData ? `<pre class="bg-light p-3 rounded"><code>${JSON.stringify(errorData, null, 2)}</code></pre>` : ''}
            `;
        }
    </script>
</body>
</html>